<template>
    <div class="common-layout common">
        <el-container class="common">
            <el-aside width="260px" class="limits">
                <el-tabs type="border-card" v-model="data.activeName" @tab-click="handleClick">
                    <el-tab-pane name="first" :label="$t('webAuto.InformationReading')">
                        <div class="panel-body">
                            <div id="jstree1" class="jstree1">
                                <i class="jstree-icon " role="presentation"></i>
                                <a :class="data.title == '全部信息' ? 'jstree-clicked jstree-anchor' : 'jstree-anchor'"
                                    @click="showMenuAll">
                                    <i class=" jstree-icon jstree-themeicon fa fa-folder jstree-themeicon-custom"
                                        role="presentation">
                                        <img class="sfile" src="./img/file.png" />
                                    </i>{{ $t('webAuto.fullDetail') }}
                                </a>
                            </div>
                            <ul class="jstree-children">
                                <li v-for="(item, index) in data.infoList" :key="index" class="jstree-node  jstree-leaf"
                                    @click="showMenuLi(item)">
                                    <i class="jstree-icon jstree-ocl" role="presentation"></i>
                                    <a id="qbxx_anchor4" class="jstree-anchor">
                                        <span :class="data.title == item.title ? 'jstree-clicked ' : ''"
                                            style="padding:5px 3px;">{{ item.title }}</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane name="second" :label="$t('webAuto.informationManagement')" v-if="data.roles.includes('WFLOW_APPROVAL_ADMIN')">
                        <!-- 新增菜单 -->
                        <!-- <div class="addMnus">
                            <el-button class="button" type="primary" plain @click="addClick"><el-icon><Plus /></el-icon>新增</el-button>
                        </div> -->
                        <!-- 展示菜单 -->
                        <div class="panel-body">
                            <div id="jstree1" class="jstree1">
                                <i class="jstree-icon " role="presentation"></i>
                                <a :class="data.title == '全部信息' ? 'jstree-clicked jstree-anchor' : 'jstree-anchor'"
                                    @click="showMenuAll">
                                    <i class="sfile jstree-icon jstree-themeicon fa fa-folder jstree-themeicon-custom"
                                        role="presentation" style="margin-right: 8px;">
                                        <img class="sfile" src="./img/file.png" />
                                    </i>{{ $t('webAuto.fullDetail') }}
                                </a>
                            </div>
                            <ul class="jstree-children">
                                <li v-for="(item, index) in data.infoList" :key="index" class="jstree-node  jstree-leaf"
                                    @click="showMenuLi(item)">
                                    <i class="jstree-icon jstree-ocl" role="presentation"></i>
                                    <a id="qbxx_anchor4" class="jstree-anchor">
                                        <span :class="data.title == item.title ? 'jstree-clicked ' : ''"
                                            style="padding:5px 3px;">{{ item.title }}</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-aside>
            <el-main class="main-box">
                <div class="mail-box-header">
                    <div class="binding">
                        <h2 class="ng-binding">{{ data.title }}</h2>
                        <el-form :inline="true" :model="form" class="mail-search demo-form-inline ">
                            <el-form-item>
                                <el-input v-model="form.search" style="max-width: 700px" :placeholder="$t('webAuto.guanjianzi')">
                                    <template #append>
                                        <el-button type="info" @click="searchClick" plain>{{ $t('webAuto.sousuo') }}</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="mail-tools">
                        <el-button class="tools-btn" @click="showMenuLi()"><el-icon>
                                <Refresh />
                            </el-icon>{{ $t('webAuto.Refresh') }}</el-button>
                        <el-button type="danger" class="tools-btn"
                            v-if="data.activeName == 'second' && data.roles.includes('WFLOW_APPROVAL_ADMIN')"
                            @click="deleteClick">{{ $t('webAuto.delete') }}</el-button>
                        <el-button type="primary" class="tools-btn"
                            style="background-color:#4878D4;border-color:#4878D4"
                            v-if="data.activeName == 'second' && data.roles.includes('WFLOW_APPROVAL_ADMIN')"
                            @click="updateReadClick">{{ $t('webAuto.xiugai') }}</el-button>
                        <el-dropdown type="primary" class="tools-btn fast" style="background-color:#1c84c6 !important">
                            <span class="el-dropdown-link">{{ $t('webAuto.QuicklyInitiate') }}<el-icon class="el-icon--right">
                                    <CaretBottom />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu style="width:160px">
                                    <el-dropdown-item class="action" v-for="(item, index) in data.infoList" :key="index"
                                        @click="AddPagesClick(item)">{{ item.title }}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <!-- 快速发起 -->
                    </div>
                </div>
                <div class="vote-item">
                    <p class="info-none ng-hide" v-if="!data.detailList.length">{{ $t('webAuto.NoRelevantAvailable') }}</p>
                    <div class="row-list" v-for="(item, index) in data.detailList" :key="index">
                        <div class="checked">
                            <el-checkbox v-model="item.checked" size="large" />
                        </div>
                        <div class="vote-box">
                            <div class="vote-title">
                                <p class="title" @click="readClick(item)">{{ item.title }}</p>
                                <img class="fa-modal" src="./img/fill.png"
                                    v-if="item.isRelease == 'Y' && data.activeName != 'first'" />
                                <!-- 状态 -->
                                <span class="textByPreview" v-if="item.isRelease == 'Y' && data.activeName != 'first'"
                                    style="background-color: #5186ec;color:#fff">{{ $t('webAuto.Published') }}</span>
                                <span class="textByPreview"
                                    v-if="item.isRelease == 'N' && data.activeName != 'first'">{{ $t('webAuto.SaveDraft') }}</span>
                                <span class="reading textByPreview"
                                    v-if="item.loginUserIsRead == 'N' && data.activeName == 'first'">{{ $t('webAuto.UNREAD') }}</span>
                            </div>
                            <small class="title-small ng-binding">{{ item.testDescription }}</small>
                            <div class="vote-info vote-title">
                                <img class="fa-clock" src="./img/time.png" />
                                <span v-if="item.isRelease == 'N'">{{ $t('webAuto.CreatedOn') }}</span>
                                <span v-else>{{ $t('webAuto.fabuyu') }}</span>
                                <span>{{ item.created }}</span>
                                <img class="fa-clock" src="./img/people.png" style="margin-left: 10px" />
                                <span>{{ item.creator }}</span>
                                <!-- 查看人数 -->
                                <img class="fa-clock" src="./img/view.png" style="margin-left: 10px" />
                                <span style="color:#5186ec;font-size:14px">（{{ item.readQty || '0/0' }}）</span>
                            </div>
                        </div>
                        <div class="breadcrumb">{{ data.title }}</div>
                    </div>
                    <div class="paging">
                        <el-pagination :currentPage="data.currentPage" :page-size="data.pagesize" :page-sizes="[10]"
                            :small="small" :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import homePageApi from "@/api/homePage.js";
import { useRouter, useRoute } from "vue-router";
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import { ElMessage, ElMessageBox } from 'element-plus'
const { t } = useI18n();

const route = useRoute();
const router = useRouter();

onMounted(() => {
    homePageDetail()
    showMenuLi()
})

const data = reactive({
    roles: localStorage.getItem('roles') || '', // 角色判断显示权限
    pageSize: 10,
    currentPage: 1,
    puuid: '',
    type: '栏目',
    activeName: 'first',
    infoList: [],
    detailList: [],
    title: '全部信息',// 标题
})


const small = ref(false)
const background = ref(false)
const disabled = ref(false)

//查询菜单信息
const homePageDetail = () => {
    homePageApi.getHomePage({
        pageSize: data.pageSize,
        pageNo: data.currentPage,
        type: data.type,
    }).then(res => {
        data.infoList = res.data.records
        data.total = res.data.total
    })
}

const handleSizeChange = (val) => {
    data.pageSize = val
    showMenuLi()
}
const handleCurrentChange = (val) => {
    data.currentPage = val
    showMenuLi()
}
const handleClick = (tab, event) => {
    // console.log(tab, event)
    data.activeName = tab.props.name
    showMenuLi()
}
// 展示画面
const form = reactive({
    search: ''
})

// 搜索
const searchClick = () => {
    console.log('search', form.search)
    // 获取搜索数据
    showMenuLi()
}

// 快速发起
const AddPagesClick = (item) => {
    // publish 快速发起路由 uuid
    const { href } = router.resolve({ path: `/publish` });
    window.open(href + '?puuid=' + item.uuid + '&uuid=' + null, '_blank');
}

// 菜单明细点击
const showMenuLi = (item) => {
    data.title = item?.title
    homePageApi.getHomePage({
        isRelease: data.activeName == 'first' ? 'Y' : '',
        pageSize: data.pageSize,
        pageNo: data.currentPage,
        puuid: item?.uuid,
        type: '信息',
        title: form.search
    }).then(res => {
        res.data.records.forEach(element => {
            element.checked = false
        });
        data.detailList = res.data.records
        data.total = res.data.total
    })
}

// 全部点击
const showMenuAll = () => {
    data.title = $t('webAuto.fullDetail')
    showMenuLi()
    // data.type='信息'
    // homePageDetail()
}

// 阅读 跳转
const readClick = (item) => {
    console.log(item)
    if (item.isRelease == 'Y') {
        // 判断是否pdf为正文
        if (item.isPdf == 'Y') {
            let previewUrl = 'http://180.101.147.124:8012/onlinePreview?url=' + encodeURIComponent(base64Encode(
                `${item.filePath}?name=${'文件预览'}`))
            window.open(previewUrl)
        } else {
            const { href } = router.resolve({ path: `/read` });
            window.open(href + '?uuid=' + item.uuid, '_blank');
        }
    } else {
        const { href } = router.resolve({ path: `/publish` });
        window.open(href + '?uuid=' + item.uuid + '&puuid=' + item.puuid, '_blank');
    }
}

const base64Encode = (str) => {
    // console.log(str)
    // 将字符串转换为 Uint8Array
    const bytes = new TextEncoder().encode(str);
    // 使用 btoa() 方法进行 Base64 编码
    return btoa(String.fromCharCode.apply(null, bytes));
}

// 刪除
const deleteClick = () => {
    let arr = data.detailList.filter(x => x.checked == true)
    if (!arr.length) {
        ElMessage({
            message: $t('webAuto.selectDataDeleted'),
            type: 'warning',
        })
        return
    } else {
        let uuids = []
        arr.forEach(x => {
            uuids.push(x.uuid)
        })
        // console.log(uuids)
        // 调用接口
        homePageApi.deleteHomePage(uuids).then(res => {
            console.log(res)
            if (res.data.statusCode == 200) {
                ElMessage(res.data.message)
                showMenuLi()
            } else {
                ElMessage(res.data.message)
            }
        })
    }

}

const updateReadClick = () => {
    let arr = data.detailList.filter(x => x.checked == true)
    if (!arr.length || arr.length >= 2) {
        ElMessage({
            message: $t('webAuto.selectDataModified'),
            type: 'warning',
        })
        return
    } else {
        let item = arr[0]
        const { href } = router.resolve({ path: `/publish` });
        window.open(href + '?uuid=' + item.uuid + '&puuid=' + item.puuid, '_blank');
    }

}
// 标记为已读
// const markReadClick = () => {
//     let arr = data.detailList.filter(x => x.checked == true)
//     if (!arr.length) {
//         ElMessage({
//             message: '请选择需要标记为已读的数据',
//             type: 'warning',
//         })
//     }
// }
</script>

<style scoped lang="less">
@import "index.less";

* {
    margin: 0;
    padding: 0;
}

.reading {
    background-color: #f8ac59 !important;
    color: #FFFFFF !important;
    margin-left: 5px;
}
</style>
